<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <script type="text/javascript" src="${ctx }/res/hplus/js/jquery.min.js"></script>
    <title>软装到家</title>
    <style>
    	a {
    		cursor:pointer;
    	}
    </style>
</head>
<body>
 
<%@include file="../head.jsp" %>

<!--主焦点图-->
<div class="slider  w-100p ">
    <ul class="bxslider">
        <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li>
        <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li>
        <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li>
    </ul>
</div>
<div class="brand-title-box w-100p bg-f5">
    <div class="ju-brand"><img src="${ctx }/res/img/icon/jupingpai.png"></div>
    <ul class="brands">
        <%-- <li><a class="<c:if test="${empty brandStyleDTO.styleID }">active</c:if>" href="#" value="${brandStyleDTO.styleID }" onclick="queryByStyle(1, this)">全部</a></li>
        <li><a class="<c:if test="${brandStyleDTO.styleID eq 1 }">active</c:if>" href="#" value="1" onclick="queryByStyle(2, this)">简约北欧</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">简美风格</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">现代风格</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">简欧风格</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">美式风格</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">欧式风格</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">尊贵法式</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">地中海</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">韩式</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">新中式</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">环保儿童</a></li>
        <li><a class="" href="#" value="1" onclick="queryByStyle(2, this)">其它</a></li>
         --%>
       <c:forEach items="${hsts }" var="hst">
               <li><a class="<c:if test="${brandStyleDTO.styleID eq hst.key }">active</c:if>" href="#" value="${hst.key }" onclick="queryByStyle(${hst.key}, this)">${hst.value }</a></li>
       </c:forEach>
    </ul>
    
</div>
<div class="w-100p bg-f5 clear brands-box">
<ul class="brands-list">

			<c:forEach items="${brandStyleDTOs }" var="brandStyleDTO">
				<li><a href="${ctx }/hardcover/detail?brandID=${brandStyleDTO.brand.id}&styleID=${brandStyleDTO.styleID}">
						<div class="brand-img img-scale">
							<img class="scrollLoading" src="${brandStyleDTO.brand.headImage }" style="width:290px; height: 200px;">
						</div>
						<div class="brand-info">${brandStyleDTO.brand.name}</div>
						<div class="brand-info-img">
							<img class="scrollLoading" src="${brandStyleDTO.brand.image }" style="width:290px; height: 200px;"> 
						</div>
				</a></li>
			</c:forEach>

			</ul>
</div>
<div class="w-100p bg-f5">
    <!--分页-->
  <%@include file="../page4hardcover.jsp" %>

</div>



<%@include file="../foot.jsp" %>



<script type="text/javascript">

function queryByStyle(index, self) {
	$("ul.brands li a").each(function(){
		$(this).removeClass("active");
	});
	
	$(self).addClass("active");
	
	var pageNum = $("#page").val();
	var styleID = $(self).attr("value");
	if (styleID == "undefined" || styleID == "") {
		styleID = 0;
	}
	
	gotoPage(pageNum, styleID)
	
}


function gotoPage(pageNum, styleID) {   //跳转到指定页面
	location="${ctx}/hardcover/index?page=" + pageNum + "&styleID=" + styleID;
}
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});
        $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
    });
</script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-box').tab();  
        
        
       
    })
</script>
</body>
</html>
